<template>
    <div>
      <div class="page-wrap">
        <div class="w">
          <div class="user-con">
            <div class="user-title">找回密码</div>
            <div class="user-box">
              <div class="error-item">
                <i class="fa fa-minus-circle error-icon"></i>
                <p class="err-msg">Error</p>
              </div>
              <div class="step-con step-username" style="display: block;">
                <p class="user-item-text">请输入用户名：</p>
                <div class="user-item">
                  <label class="user-label" for="">
                    <i class="fa fa-user"></i>
                  </label>
                  <input class="user-content" id="username" placeholder="请输入用户名" autocomplete="off">
                </div>
                <a class="btn btn-submit" id="submit-username" v-on:click="forget">下一步</a>
              </div>
              <div class="step-con step-question">
                <p class="user-item-text">密码提示问题是：<span class="question"></span></p>
                <div class="user-item">
                  <label class="user-label" for="">
                    <i class="fa fa-key"></i>
                  </label>
                  <input class="user-content" id="answer" placeholder="请输入密码提示问题答案" autocomplete="off">
                </div>
                <a class="btn btn-submit" id="submit-question">下一步</a>
              </div>
              <div class="step-con step-password">
                <p class="user-item-text">请输入新密码：</p>
                <div class="user-item">
                  <label class="user-label" for="">
                    <i class="fa fa-lock"></i>
                  </label>
                  <input type="password" class="user-content" id="password" placeholder="请输入新密码" autocomplete="off">
                </div>
                <a class="btn btn-submit" id="submit-password">下一步</a>
              </div>

              <div class="link-item">
                <router-link class="link" to="/Login">返回登录&gt;&gt;</router-link>
<!--                <a class="link" href="./user-login.html" target="_blank">返回登录&gt;&gt;</a>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    export default {
        name: "userPassReset",
        components: {Header},
    }
</script>

<style scoped>
  .nav-simple{
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ddd;
    background: #fff;
  }
  .nav-simple .logo{
    font-size: 26px;
    font-weight: bold;
    color: #FF8800;
    text-decoration: none;
  }
  .nav-simple .jdlogo{
    left: 0px;
    margin-top: 10px;
    display: block;
    width: 160px;
    height: 50px;
    background-image: url(../assets/jdlogo.png);
    background-size: 160px 50px;
  }
  /* æœ€å¤–å±‚å®¹å™¨ */
  .page-wrap{
    padding: 40px 0;
  }
  /* è¡¨å•æ¡† */
  .user-con{
    position: relative;
    margin: 0 auto;
    width: 400px;
    background: #fff;
  }
  .user-con .user-title{
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #666;
  }
  .user-con .user-box{
    padding: 20px;
  }
  /* é”™è¯¯æç¤ºæ¡† */
  .user-con .user-box .error-item{
    position: relative;
    padding: 4px 0 4px 40px;
    margin-bottom: 10px;
    border: 1px solid red;
    color: red;
    background: #fde9e9;
    display: none;
  }
  /* é”™è¯¯å›¾æ ‡ */
  .user-con .user-box .error-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;
  }
  /* æ¯ä¸€æ­¥çš„å®¹å™¨ */
  .user-con .step-con{
    display: none;
  }
  /* è¾“å…¥æ¡†æç¤ºä¿¡æ¯ */
  .user-con .user-item-text{
    margin-bottom: 10px;
    font-size: 14px;
  }
  /* è¾“å…¥æ¡†å®¹å™¨ */
  .user-con .user-item{
    position: relative;
    margin-bottom: 20px;
  }
  .user-con .user-item .user-label{
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    line-height: 36px;
    background: #f3f3f3;
    font-size: 18px;
    color: #d3d3d3;
    text-align: center;
    border-right: 1px solid #bdbdbd;
  }
  .user-con .user-item .user-content{
    padding: 10px 0 10px 50px;
    width: 308px;
    height: 18px;
    line-height: 18px;
    font-size: 15px;
    border: 1px solid #bdbdbd;
    outline: none;
  }
  .user-con .btn-submit{
    width: 100%;
    padding: 2px 0;
    text-align: center;
    font-size: 20px;
  }
  /* è·³è½¬é“¾æŽ¥ */
  .user-con .link-item{
    text-align: right;
    margin-top: 10px;
  }
  .user-con .link-item .link{
    margin-left: 10px;
    color: #999;
  }
</style>
